<script setup lang="ts">
import MusicList from '@/components/music-list/index.vue'
import { getSongSheetSongList } from '@/api/recommend'
import { onMounted } from 'vue'
import { getSongUrl } from '@/api/common'
import { processSongUrl } from '@/utils'
interface IProps {
  title: string
  pic: string
}
const props = withDefaults(defineProps<IProps>(), {
  title: '',
  pic: ''
})
const route = useRoute()
const songList = ref<ISongItem[]>([])
const loading = ref<boolean>(false)
onMounted(async () => {
  loading.value = true
  const { songs } = await getSongSheetSongList(Number(route.params.id))
  const ids = songs.map(({ id }) => id)
  const { data: urls } = await getSongUrl(ids)
  // 根据歌曲id获取到对应的url播放地址
  processSongUrl(songs, urls)
  loading.value = false
  songList.value = songs
})
</script>

<template>
  <div class="album">
    <music-list :song-list="songList" :title="props.title" :pic="props.pic" :loading="loading" />
  </div>
</template>

<style scoped lang="scss">
.album {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 120;
  background-color: $color-background;
}
</style>
